<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="/venue/css/bootstrap.min.css" />
		<link rel="stylesheet" href="/venue/css/homePage.css" />
		<link rel="stylesheet" href="/venue/css/myCenter.css" />


	</head>
	<body>
		<div  class="container col-xl-12 " id="mc">
			<!-- pagehead navbar -->
			<div id="pageHead" class="">
				<!-- Brand/logo -->
				<div id="logoDiv" class="dropdown">
					<a class="navbar-brand  dropdown-toggle" data-toggle="dropdown"><span id="logoSpan">{{venue.nickname}}</span></a>
					<!--					  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">-->
					<!--						  <span class="sr-only">Toggle Dropright</span>-->
					<!--					  </button>-->
					<div class="dropdown-menu">
						<a class="dropdown-item" href="homePage.html">首页</a>
						<a class="dropdown-item" href="dynamic.html">动态</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#">退出</a>
					</div>
				</div>


				<!-- Links -->
				<div id="linksDiv">
					<ul class="nav nav-tabs nav-justified justify-content-end">
						<li class="nav-item">
							<a class="nav-link" href="searchCoach.html">查看教练</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="searchVenue.html">查看场馆</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="followed.html">关注</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="message.html">通知</a>
						</li>
						<li class="nav-item">
							<a class="nav-link active" href="myCenter.html">场馆中心</a>
						</li>
					</ul>
				</div>

			</div>
			<!-- navbar end -->

			<!-- 分隔间距 -->
			<div id="separate"></div>

			<!--主div-->
			<div id="mainDiv">
				<!--导航侧边栏-->
				<div id="navDiv" class="btn-group-vertical">
					<button @click="checkInfo" class="navs btn btn-outline-primary " :class="{active:infoFlag}"><div>个人信息</div></button>
					<button @click="checkStudents" class="navs btn btn-outline-primary " :class="{active:studentFlag}"><div>我的学员</div></button>
					<button @click="checkRecruit" class="navs btn btn-outline-primary " :class="{active:recruitFlag}"><div>我的招聘</div></button>
					<button @click="checkLessons" class="navs btn btn-outline-primary " :class="{active:lessonFlag}"><div>我的课程</div></button>
					<button @click="checkCoaches" class="navs btn btn-outline-primary " :class="{active:coachFlag}"><div>我的教练</div></button>
					<button @click="changePassword" class="navs btn btn-outline-primary " :class="{active:passwordFlag}"><div>密码修改</div></button>
				</div>

				<!--展示信息-->
				<div id="showDiv">
					<!--个人信息-->
					<div id="infoDiv" :style="{display:infoDisplay}">
						<div class="subInfos">
							<div class="infoHead">场馆名</div>
							<div class="infoBody">{{venue.nickname}}</div>
						</div>
						<div class="subInfos">
							<div class="infoHead">账号</div>
							<div class="infoBody">{{venue.vname}}</div>
						</div>
						<div class="subInfos">
							<div class="infoHead">联系电话</div>
							<div class="infoBody">{{venue.phoneNumber}}</div>
							<div style="float:right;margin-top: 20px;" @click="update(1)"  data-toggle="modal" data-target="#updatePhoneNumber"><img src="images/修改图片.png"></div>
						</div>
						<!-- 模态框 -->
						<div class="modal fade" id="updatePhoneNumber">
							<div class="modal-dialog modal-sm">
								<div class="modal-content">

									<!-- 模态框头部 -->
									<div class="modal-header">
										<h4 class="modal-title">完善手机号</h4>
										<button type="button" class="close" data-dismiss="modal">&times;</button>
									</div>

									<!-- 模态框主体 -->
									<div class="modal-body form-group">
										<p>手机号</p>
										<input type="text" v-model="phoneNumber" >
									</div>

									<!-- 模态框底部 -->
									<div class="modal-footer">
										<button type="button" @click="completePhoneNumber" class="btn btn-secondary" data-dismiss="modal">确认修改</button>
									</div>

								</div>
							</div>
						</div>
						<!--模态框 end-->
						<div class="subInfos">
							<div class="infoHead">场馆地址</div>
							<div id="addressInfo" class="infoBody">{{venue.address}}</div>
							<div id="showMap" style="float:right;margin-top: 20px;" href="addressMap.html" @click="update(2)"  data-toggle="modal" data-target="#updateAddress"><img src="images/修改图片.png"></div>
						</div>
						<!-- 模态框 -->
						<div class="modal fade" id="updateAddress">
							<div class="modal-dialog modal-lg">
								<div class="modal-content">

									<!-- 模态框头部 -->
									<div class="modal-header">
										<h4 class="modal-title">完善地址信息</h4>
										<button type="button" class="close" data-dismiss="modal">&times;</button>
									</div>

									<!-- 模态框主体 -->
									<div id="mapShow" class="modal-body form-group">

									</div>

									<!-- 模态框底部 -->
									<div class="modal-footer">
										<button type="button" onclick="submit()" class="btn btn-secondary" data-dismiss="modal">提交</button>
									</div>

								</div>
							</div>
						</div>
						<!--模态框 end-->

						<div class="subInfos">
							<div class="infoHead">教练人数</div>
							<div class="infoBody">{{numsOfCoach}}</div>
						</div>
						<div class="subInfos">
							<div class="infoHead">学员人数</div>
							<div class="infoBody">{{numsOfStudent}}</div>
						</div>
					</div>

					<!--我的学员-->
					<div id="studentDiv" class="list-group" :style="{display:studentDisplay}">
						<div v-for="user in students" class="students  list-group-item list-group-item-action">
							<div class="studentHead"><img :src="user.avatar"></div>
							<div class="studentName">{{user.nickname}}</div>
						</div>
					</div>

					<!--我的招聘-->
					<div id="recruitDiv" :style="{display:recruitDisplay}"><img width="534" height="300" src="images/zhaopin.jpg"></div>

					<!--我的课程-->
					<div id="lessonDiv" :style="{display:lessonDisplay}">
						<!--展示区-->
						<div id="showLesson">
							<div v-for="lesson in lessons" class="lessons">
								<div class="lessonImage"><img :src="lesson.image"></div>
								<div class="lessonInfo">
									课程名：<span>{{lesson.lname}}</span><br>
									教练：<span>{{lesson.nickname}}</span><br>
									课时数：<span>{{lesson.hours}}</span><br>
									课时费：<span>￥{{lesson.price}}</span><br>
								</div>
							</div>
						</div>
						<!--页码导航-->
					</div>

					<!--我的教练-->
					<div id="coachDiv" class="list-group" :style="{display:coachDisplay}">
						<div v-for="coach in coaches" class="coaches  list-group-item list-group-item-action">
							<div class="coachHead"><img :src="coach.avatar"></div>
							<div class="coachName">
								<div class="coachInfo">{{coach.nickname}}</div>

								<button @click="broke(coach.cid)" class="btn btn-outline-primary">解约教练</button>
							</div>

						</div>
					</div>

					<!--密码找回-->
					<div id="passwordDiv" :style="{display:passwordDisplay}">
						<!--先验证手机号-->
						<div id="captchaDiv" :style="{display:captchaDisplay}">
							<div class="info">
								<div class="chead">手机号码：</div>
								<div class="cbody"><input type="text" v-model="pswdPhoneNumber"> </div>
							</div>
							<div class="info">
								<div class="chead">验证码：</div>
								<div class="cbody"><input v-model="pswdCaptcha" type="text" style="width: 100px"><button  @click="send" class="btn btn-primary">
									{{captchaBtn}}</button></div>
							</div>
							<div class="info confirmBtn"><button @click="testCaptcha" class="btn btn-primary">确认</button> </div>
						</div>
						<!--再更改密码-->
						<div id="changePasswordDiv" :style="{display:changePasswordDisplay}">
							<div class="info">
								<div  class="chead">新密码：</div>
								<div class="cbody"><input @blur="testNewPswd" v-model="newPwd" type="password"></div>
							</div>
							<div class="info">
								<div class="chead">确认密码：</div>
								<div class="cbody"><input @blur="testRePswd" v-model="rePwd" type="password"></div>
							</div>
							<div class="info confirmBtn"><button  @click="confirmUpdate" class="btn btn-primary">确认修改</button></div>
						</div>
					</div>

				</div>

			</div>
			<!--main div end-->

		</div>
	</body>
	<script src="/venue/js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="/venue/js/axios.js" type="text/javascript" charset="utf-8"></script>
	<script src="/venue/js/axios_interceptor.js" type="text/javascript" charset="UTF-8"></script>
	<script src="/venue/js/jquery.min.js"></script>
	<script src="/venue/js/popper.min.js"></script>
	<script src="/venue/js/bootstrap.min.js"></script>
	<script src="/venue/js/myCenter.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=B0N7sNh1CriFnUEaqC8VXstshDLGkDxz"></script>
	<script type="text/javascript">
		$(function() {
			$("#showMap").click(function(e) {
				$("#mapShow").load($(this).attr("href"));
				e.preventDefault();
			});
		});
	</script>
</html>
